<template>
    <div class="c-main">
        <div class="c-content">
            <item v-for="(data,index) in characterData" :item="data" :key="index" />
        </div>
    </div>
</template>

<script>
    import Item from './item'

    const characterData = [
        {src: require('@/assets/a1.png'), title: '时尚设计', subTitle: 'Fashion Design'},
        {src: require('@/assets/a2.png'), title: '严谨工艺', subTitle: 'Technology'},
        {src: require('@/assets/a3.png'), title: '品质保证', subTitle: 'Quality Assurance'},
        {src: require('@/assets/a4.png'), title: '研发创新', subTitle: 'Research Innovate'}
    ]
    export default {
        name: "index.vue",
        components: {Item},
        data() {
            return {
                characterData,
            }
        }
    }
</script>

<style scoped lang="scss">
    .c-main {
        background: #dedede;
    }
    .c-content {
        padding: 48px 12px 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-width: 1200px;
        width: 80%;
        margin: auto;
    }
</style>